<!doctype html>
<html>
<head>
    <title>UI 1</title>
    <link
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
            rel="stylesheet">
    <style type="text/css">
        [ng\:cloak], [ng-cloak], .ng-cloak {
            display: none !important;
        }
    </style>
</head>

<body ng-app="hello" ng-cloak class="ng-cloak">

<div ng-controller="navigation" class="container">
    <ul class="nav nav-pills" role="tablist">
        <li ng-class="{active:tab('home')}"><a href="#/">Home</a></li>
        <li ng-show="authenticated" ng-class="{active:tab('protected')}">
            <a href="#/protected">Protected</a></li>
        <li ng-show="!authenticated"><a href="login">login</a></li>
        <li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li>
    </ul>

    <p ng-show="authenticated">Logged in as: {{loggedInUser.name}}</p>
</div>
<div ng-view class="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
        type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"
        type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>